import '@/components/design/question-design-panel/style.css';
import { Input, Radio, RadioGroup } from 'ant-design-vue';
import { defineComponent, PropType, reactive, ref, watch } from 'vue';
import { QuestionType } from '../typing';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<'zh' | 'en'>,
      required: true,
    },
    value: {
      type: Object as PropType<any>,
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const { language, question, value } = props;
    const mode = ref<string>(question.mode);
    const questionProper =
      language === 'zh' ? question.questionProperZh : question.questionProperEn;

    const singleValue = ref(value);
    const onChange = () => {
      emit('update:value', singleValue.value);
    };

    const radioOptions = reactive<Array<any>>([]);
    questionProper?.items?.forEach(eachItem =>
      radioOptions.push({ label: eachItem.title, value: eachItem.value }),
    );

    const onInputChange = (event: any) => {
      let radioDisabled = false;
      if (event.target.value.trim() != '') {
        radioDisabled = true;
      } else {
        radioDisabled = false;
      }
      questionProper?.items?.forEach(eachItem => {
        eachItem.disabled = radioDisabled;
      });
    };
    const watchItemDefault = () => {
      if (mode.value === 'design') {
        questionProper?.items?.forEach(eachItem => {
          watch(
            () => eachItem.isDefault,
            () => {
              let hasDefaultValue = false;
              questionProper?.items?.forEach(eachNewItem => {
                if (eachNewItem.isDefault) {
                  hasDefaultValue = true;
                }
              });

              if (hasDefaultValue) {
                if (eachItem.isDefault) {
                  singleValue.value = eachItem.value;
                  onChange();
                }
              } else {
                singleValue.value = undefined;
                onChange();
              }
            },
          );
        });
      }
    };

    watchItemDefault();

    return () => {
      return (
        <div
          class={[
            'question-container',
            'question-single-container',
            { 'question-design': mode.value === 'design' },
          ]}
        >
          <div class="question-title" v-html={questionProper!.title}></div>
          <div class="question-items">
            <RadioGroup v-model:value={singleValue.value} onChange={onChange}>
              {questionProper?.items?.map(eachItem => {
                if (eachItem.isInput) {
                  return (
                    <>
                      <label class="ant-radio-wrapper css-dev-only-do-not-override-10zq477">
                        {eachItem.title}
                        <Input
                          v-model:value={eachItem.value}
                          style="margin-left:8px;width: 100px;margin-right:8px"
                          onChange={onInputChange}
                        />
                      </label>
                    </>
                  );
                } else {
                  return (
                    <Radio value={eachItem.value} disabled={eachItem.disabled}>
                      {eachItem.title}
                    </Radio>
                  );
                }
              })}
            </RadioGroup>
          </div>
        </div>
      );
    };
  },
});
